<template>
<el-container class="site-container">
  <el-header height="65px" class="site-header">
    <main-header-content />
  </el-header>

  <el-container class="site-main">
    <el-aside width="200px" class="site-left">
      <main-sidebar />
    </el-aside>
    <el-main class="site-main-content">
      <!-- <main-breadcrumb /> -->
      <router-view />
    </el-main>
  </el-container>
</el-container>

</template>

<script>
  import MainBreadcrumb from './main-breadcrumb'
  import MainHeaderContent from './main-header-content'
  import MainNavbar from './main-navbar'
  import MainSidebar from './main-sidebar'
  export default {
    data () {
      return {
        loading: true
      }
    },
    components: {
      MainBreadcrumb,
      MainHeaderContent,
      MainNavbar,
      MainSidebar
    },
    computed: {
      documentClientHeight: {
        get () { return this.$store.state.common.documentClientHeight },
        set (val) { this.$store.commit('common/updateDocumentClientHeight', val) }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold }
      },
      userId: {
        get () { return this.$store.state.user.id },
        set (val) { this.$store.commit('user/updateId', val) }
      },
      userName: {
        get () { return this.$store.state.user.name },
        set (val) { this.$store.commit('user/updateName', val) }
      }
    },
    created () {
      this.getUserInfo()
    },
    mounted () {
      this.resetDocumentClientHeight()
    },
    methods: {
      // 重置窗口可视高度
      resetDocumentClientHeight () {
        this.documentClientHeight = document.documentElement['clientHeight']
        window.onresize = () => {
          this.documentClientHeight = document.documentElement['clientHeight']
        }
      },
      // 获取当前管理员信息
      getUserInfo () {
        this.$http({
          url: this.$http.adornUrl('/sys/user/info'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.loading = false
            this.userId = data.user.userId
            this.userName = data.user.username
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

.site-container {
  min-width: 1100px;
  min-height: 100%;
}

.site-header {
  line-height: 65px;
  color: #fff;
  background: #262526
}

.site-main {
  display: flex;
  min-height: calc(100vh - 65px);
}

.site-main-content {
  padding: 15px;
}

.site-left {
  background: #f2f2f2;
  box-shadow: 5px 0px 15px 0px rgba(0, 0, 0, 0.1);
}

.site-left {
  :global(.el-menu) {
    background-color: #f2f2f2;
  }

  :global(.el-menu-item) {
    color: #333;

    &:global(.is-active) {
      color: #fff;
      background-color: #404040 !important;
    }
  }
}


</style>

